<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>登录</title>
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/login.css">
</head>
<body>
<div class="nav">
  五子棋在线对战
</div>
<!-- 登录框 -->
<div class="login-container">
  <div class="login-dialog">
    <h3>登录</h3>
    <div class="row">
      <span>用户名</span>
      <input type="text" id="username">
    </div>
    <div class="row">
      <span>密码</span>
      <input type="text" id="password">
    </div>
    <div class="row">
      <button id="submit">提交</button>
    </div>
    <div class="register">
      <button  onclick="location.assign('register.html')">没有账号？点击注册</button>
    </div>

  </div>
</div>

<script src="./js/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="text/javascript"></script>
<script>
  let usernameInput = document.querySelector('#username');
  let passwordInput = document.querySelector('#password');
  let submitButton = document.querySelector('#submit');
  submitButton.onclick = function(){
    $.ajax({
      type: 'post',
      url: '/login',
      data: {
        username: usernameInput.value,
        password: passwordInput.value,
      },
      success: function(body){
        console.log(body);
        //成功返回当前的user对象
        //失败返回空的user
        if(body && body.userId > 0){
          Swal.fire({
            icon: 'success',
            title: '登录成功！',
            toast: true,        // 启用 Toast 模式
            position: 'top',// 显示在上方
            showConfirmButton: false,
            timer: 2000         // 2秒后自动消失
          });
          setTimeout(() => {
            location.assign('/game_hall.html');
          }, 2000);
        }else if(body.userId === 0){
          alert("用户密码错误！");
        }else{
          alert("用户不存在！");
        }
      },
      error: function(body){
        console.log("userId="+body.userId);
        alert("登录失败！");
      }
    });
  }
</script>
</body>
</html>